var ManageSetting = function () {
  var template = /* html */ `
    <div class="manage-setting" v-loading.fullscreen.lock="loading">
      <template v-if="isShow">
        <div v-if="manageList.length===0" class="no-data">
          <div>暂无人员可设置为管理员</div>
        </div>
        <template v-else>
          <div style="color:#ff0000;margin-bottom:10px">注：最多不能超过5个管理员</div>
          <check-group :data="manageList" :size="maxSize"></check-group>
          <div style="text-align:center;margin-top:15px">
            <el-button size="medium" type="primary" @click="ensure">确定</el-button>
          </div>
        </template>
      </template>
    </div>
  `;

  return {
    props: {
      device: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        manageList: [],
        maxSize: 0,
        isShow: false
      };
    },

    created: function () {
      var self = this;
      this.setManageList().then(function () {
        self.isShow = true;
      });
    },

    methods: {
      setManageList: function () {
        var device = this.device;
        this.loading = true;
        var self = this;
        return ajaxRequest('dingTalk/getAttendDeviceUsers', {
          deviceId: device.id
        }).then(function (manageList) {
          var maxSize = 0;
          manageList = _.map(manageList, function (manage) {
            var userName = manage.userName;
            var len = userName.length;
            if (maxSize < len) {
              maxSize = len;
            }
            return {
              id: manage.userId,
              label: userName,
              checked: manage.isManager === 1
            };
          });
          self.maxSize = maxSize;
          self.manageList = manageList;
          self.loading = false;
          return manageList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      ensure: function () {
        var manageList = this.manageList;
        manageList = _.filter(manageList, {
          checked: true
        });
        if (manageList.length > 5) {
          this.$alert('设置的管理员已经超过5个', '信息');
          return;
        }

        manageList = _.map(manageList, function (manage) {
          return {
            managerId: manage.id,
            managerName: manage.label
          };
        });

        var device = this.device;
        this.loading = true;
        var self = this;
        return ajaxRequest('dingTalk/insertAndDeleteAttendDeviceManager', {
          deviceId: device.id,
          deviceManagerArr: JSON.stringify(manageList)
        }).then(function () {
          self.loading = false;
          self.$alert('该考勤机设置管理员成功', '信息', {
            callback: function () {
              self.$emit('setting-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      CheckGroup: CheckGroup
    },

    template: template
  };
}();
